<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户类别</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 展示区 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>客户类别列表</span>
        </div>
        <!-- 类别展示及删除 -->
        <el-table
          class="show_table"
          :data="classList"
          style="width: 100%"
          v-loading="loading"
          border
          stripe
        >
          <el-table-column type="index"> </el-table-column>
          <el-table-column prop="roleName" label="类别名称" width="230">
          </el-table-column>
          <el-table-column class="ede" label="操作">
            <template slot-scope="scope">
              <!-- 删除按钮 -->
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="removeClientById(scope)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 添加区 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>添加客户类别</span>
        </div>
        <!-- 类别添加 -->
        <el-card class="add">
          <el-form label-position="top" label-width="100px" class="add_form">
            <el-form-item label="类别名称">
              <el-input v-model="roleName"></el-input>
            </el-form-item>
            <el-button class="addBtn" type="primary" @click="addRole">
              确 定
            </el-button>
          </el-form>
        </el-card>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
      loading: false,
      //类别列表
      classList: [],
      //添加类别
      roleName: "",
    };
  },
  methods: {
    //获取客户类别信息
    async getClassList() {
      this.loading = true;
      const { data: res } = await this.$http.get("getAllRole");
      if (res.status !== 200) return this.$message.error(res.msg);
      this.classList = res.roleList;
      this.loading = false;
    },
    async addRole() {
      const { data: res } = await this.$http.post(
        "/addRole",
        qs.stringify({
          roleName: this.roleName,
        })
      );
      if (res.status !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.roleName = "";
      this.getClassList();
    },

    //删除类别
    async removeClientById(data) {
      const confirmResult = await this.$confirm(
        "是否删除该类别, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") return this.$message.info("已取消删除");
      const { data: res } = await this.$http.get("/delRole", {
        params: {
          roleId: data.row.roleId,
        },
      });
      if (res.status !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.getClassList();
    },
  },
  created() {
    this.getClassList();
  },
};
</script>

<style scoped>
.el-card {
  height: 600px;
}

.box-card {
  box-sizing: border-box;
  height: 540px;
  float: left;
  width: 46%;
  margin: 0 2%;
}

.add {
  height: 350px;
  margin: 10% 20px;
}

.add_form {
  padding: 50px 0;
}

.addBtn {
  margin-top: 50px;
  width: 100%;
}

.show_table {
  overflow-y: auto;
}
</style>
